<template>
    <div>
        <h3>安全管理数据中心</h3>
        <el-date-picker class="choice-date" v-model="choice_date" value-format="yyyy-MM-dd" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        <div class="content">
            <div class="charts-block">
                <h5>安全问题分布统计图</h5>
                <simple-bar id="left-1" :is_precent="false" class="left-1" :data="left_1"></simple-bar>
            </div><div class="charts-block">
                <h5>安全问题及亮点分布统计表</h5>
                <simple-bar id="right-1" :many_color="true" :is_line="true" :is_precent="false" class="left-1" :data="right_1"></simple-bar>
            </div>
            <div class="table-block">
                <h5>安全问题销项表</h5>
                <div class="table">
                    <el-table :cell-style="getCellStyle" :header-cell-style="getRowClass" stripe :data="table_1" style="width: 100%">
                        <el-table-column label="序号" type="index" width="50">
                        </el-table-column>
                        <el-table-column property="department" label="整改责任单位"></el-table-column>
                        <el-table-column property="building" label="工程部位"></el-table-column>
                        <el-table-column show-overflow-tooltip property="description" label="问题描述"></el-table-column>
                        <el-table-column property="manager" label="整改责任人"></el-table-column>
                        <el-table-column property="deadline" label="整改期限"></el-table-column>
                        <el-table-column property="creater" label="发单人"></el-table-column>
                        <el-table-column property="status" label="整改状态"></el-table-column>
                    </el-table>
                </div>
            </div>
            <div class="table-block">
                <h5>重大危险源实况表</h5>
                <div class="table">
                    <el-table :cell-style="getCellStyle" :header-cell-style="getRowClass" stripe :data="table_2" style="width: 100%">
                        <el-table-column label="序号" type="index" width="50">
                        </el-table-column>
                        <el-table-column label="重大危险源名称" property="name"></el-table-column>
                        <el-table-column label="工程部位" property="building"></el-table-column>
                        <el-table-column label="巡检责任人" property="manager"></el-table-column>
                        <el-table-column label="当前状态" property="status"></el-table-column>
                        <el-table-column label="检查记录日期" property="deadline"></el-table-column>
                        <el-table-column label="检查是否逾期" property="deadstatus"></el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import SimpleBar from "@/components/charts/SimpleBar.vue";

export default {
    name: "safety-table",
    components: {
        SimpleBar
    },
    data() {
        return {
            choice_date: ["2018-10-01", "2018-10-12"],
            left_1: {
                x: ["1号楼", "2号楼", "3号楼", "4号楼", "5号楼", "6号楼"],
                data: [[28, 28, 28, 28, 28, 28]],
                name: ["质量亮点"],
                color: ["#649dfa"]
            },
            right_1: {
                x: [
                    "文明施工",
                    "安全防护",
                    "外脚手架",
                    "支横架",
                    "临时用电",
                    "消防",
                    "小型支具"
                ],
                data: [
                    [58, 67, 92, 108, 105, 90, 90],
                    [62, 78, 99, 110, 120, 115, 67]
                ],
                color: [
                    "#5ed8eb",
                    "#eb757f",
                    "#649dfa",
                    "#caeb5e",
                    "#5eebbc",
                    "#eb5ed8",
                    "#ebb05e"
                ]
            },
            table_1: [
                {
                    department: "项目1部",
                    building: "A栋12层",
                    description: "钢筋长度搭建不足",
                    manager: "张三",
                    deadline: "2018年11月10日",
                    creater: "李四",
                    status: "待整改"
                },
                {
                    department: "项目1部",
                    building: "A栋12层",
                    description: "钢筋长度搭建不足",
                    manager: "张三",
                    deadline: "2018年11月10日",
                    creater: "李四",
                    status: "待整改"
                },
                {
                    department: "项目1部",
                    building: "A栋12层",
                    description: "钢筋长度搭建不足",
                    manager: "张三",
                    deadline: "2018年11月10日",
                    creater: "李四",
                    status: "待整改"
                },
                {
                    department: "项目1部",
                    building: "A栋12层",
                    description: "钢筋长度搭建不足",
                    manager: "张三",
                    deadline: "2018年11月10日",
                    creater: "李四",
                    status: "待整改"
                },
                {
                    department: "项目1部",
                    building: "A栋12层",
                    description: "钢筋长度搭建不足",
                    manager: "张三",
                    deadline: "2018年11月10日",
                    creater: "李四",
                    status: "待整改"
                },
                {
                    department: "项目1部",
                    building: "A栋12层",
                    description: "钢筋长度搭建不足",
                    manager: "张三",
                    deadline: "2018年11月10日",
                    creater: "李四",
                    status: "待整改"
                }
            ],
            table_2: [
                {
                    name: "高大模板支模",
                    building: "A栋12层",
                    manager: "张三",
                    status: "可控",
                    deadline: "2018年11月10日",
                    deadstatus: "否"
                },
                {
                    name: "超高模板支模",
                    building: "A栋12层",
                    manager: "张三",
                    status: "危险",
                    deadline: "2018年11月10日",
                    deadstatus: "是"
                },
                {
                    name: "超高模板支模",
                    building: "A栋12层",
                    manager: "张三",
                    status: "可控",
                    deadline: "2018年11月10日",
                    deadstatus: "是"
                },
                {
                    name: "悬挑架工字钢安装",
                    building: "A栋12层",
                    manager: "张三",
                    status: "可控",
                    deadline: "2018年11月10日",
                    deadstatus: "否"
                },
                {
                    name: "悬挑架工字钢安装",
                    building: "A栋12层",
                    manager: "张三",
                    status: "可控",
                    deadline: "2018年11月10日",
                    deadstatus: "否"
                }
            ]
        };
    },
    methods: {
        getRowClass({ row, column, rowIndex, colIndex }) {
            if (rowIndex === 0) {
                return "background:#f5f7f9;text-align: center;";
            }
        },
        getCellStyle({row, rowIndex}) {
            return "text-align: center"
        }
    }
};
</script>

<style scoped>
@import "../../assets/css/data.css";
</style>
